<template>
  <div class="bg-white rounded-lg shadow-sm overflow-hidden relative">
    <Swiper :options="swiperOptions" ref="adSwiper" class="h-64">
      <SwiperSlide v-for="(ad, index) in internalAds" :key="index">
        <div
          class="relative w-full h-full cursor-pointer hover:opacity-95 transition-opacity"
          @click="handleAdClick(ad)"
        >
          <img :src="ad.image" :alt="ad.title" class="w-full h-full object-cover" />
          <!-- 文案区域 -->
          <div class="absolute inset-0 flex flex-col justify-end p-4 bg-gradient-to-t from-black/60 to-transparent pointer-events-none">
            <h3 class="font-medium text-lg text-white mb-2">{{ ad.title || "暂无广告" }}</h3>
            <p class="text-gray-200 text-sm">{{ ad.description || "暂无描述" }}</p>
          </div>
        </div>
      </SwiperSlide>
    </Swiper>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from "vue-awesome-swiper";

export default {
  name: "AdCarousel",
  components: {
    Swiper,
    SwiperSlide
  },
  props: {
    // 可选的外部广告数据
    ads: {
      type: Array,
      default: () => []
    },
    // 轮播配置
    options: {
      type: Object,
      default: () => ({
        loop: true,
        autoplay: {
          delay: 3000,
          disableOnInteraction: false
        },
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        }
      })
    }
  },
  data() {
    return {
      currentIndex: 0,
      swiperOptions: this.options,
      // 内部广告数据，如果没有提供外部数据，则使用这个
      defaultAds: [
        {
          id: 1,
          title: "社区活动",
          description: "参与我们的线上讨论",
          image: "http://img.netbian.com/file/2025/0616/083757g2EUP.jpg",
          link: "/events"
        },
        {
          id: 2,
          title: "新功能上线",
          description: "探索我们的最新功能",
          image: "http://img.netbian.com/file/20150117/025e9fb6033ab3bb2161208c35306d1e.jpg",
          link: "/features"
        },
        {
          id: 3,
          title: "加入我们",
          description: "成为我们社区的一员",
          image: "http://img.netbian.com/file/2016/1021/77814ff87236f14b35197abe0397590a.jpg",
          link: "/join"
        }
      ]
    };
  },
  computed: {
    // 如果提供了外部广告数据，则使用外部数据，否则使用内部默认数据
    internalAds() {
      return this.ads.length > 0 ? this.ads : this.defaultAds;
    }
  },
  mounted() {
    if (this.$refs.adSwiper && this.$refs.adSwiper.$swiper) {
      this.$refs.adSwiper.$swiper.on("slideChange", () => {
        this.currentIndex = this.$refs.adSwiper.$swiper.realIndex;
        this.$emit('slide-change', this.currentIndex);
      });
    }
  },
  methods: {
    handleAdClick(ad) {
      // 处理跳转
      if (ad.url) {
        if (ad.url.startsWith('http')) {
          // 外部链接
          window.open(ad.url, '_blank');
        } else if (ad.url.startsWith('/')) {
          // 内部路由
          this.$router.push(ad.url);
        } else {
          // 相对路径
          this.$router.push('/' + ad.url);
        }
      }
      // 统计点击（可选）
      this.trackAdClick(ad);
    },
    trackAdClick(ad) {
      // 可选：添加广告点击统计
      console.log('广告点击:', ad.title);
      // 这里可以发送统计数据到后端
    }
  }
};
</script>

<style scoped>
/* 如果需要自定义样式，可以在这里添加 */
</style>
